<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.org/ui">
<h:html>
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Visualizador de ruta optima</title>
        <link href="css/style.css" rel="stylesheet"/>
        <script type="text/javascript" >
            var path=#{VerMapaBean.listaPuntosMapaStr};
            //var path=[{lat: 13.6203,lon: 101.09},{lat: 14.6203,lon: 101.29},{lat: 15.0203,lon: 102.09}];
        </script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">// <![CDATA[
              function initialize() {
                var myOptions = {
                  center: new google.maps.LatLng(Number(path[0].lat), Number(path[0].lon) ),
                  zoom: 8,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);

                gozilla3 = new google.maps.Marker({
                    position: new google.maps.LatLng(Number(path[0].lat), Number(path[0].lon) ),
                    icon: 'pics/flecha.png',
                    map: map,
                   title: 'GodZZilla!!'
                });


                var ruta=[];
                var item = null;
            for(i=0;i<path.length;i++){
                item=new google.maps.LatLng(Number(path[i].lat), Number(path[i].lon) );
                ruta.push(item);
            }
            var lineas = new google.maps.Polyline({
                path: ruta,
                 map: map,
                 strokeColor: '#222000',
                 strokeWeight: 4,
                 strokeOpacity: 0.6,
                 clickable: false
            });
              }
      // ]]></script>
    </h:head>

    <h:body styleClass="page-one">
        <h:form id="formMapa">
            <p:growl id="growl" showDetail="true" sticky="true" />
            <p:layout styleClass="panel-titulo">
                <p:layoutUnit position="center"  styleClass="cabecera" >
                    <h:panelGroup>
                        <h:graphicImage url="pics/logo.jpg" styleClass="logo" >
                        </h:graphicImage>
                    </h:panelGroup>
                </p:layoutUnit>
            </p:layout>
            <p:layout styleClass="panel-cnt">
                <p:layoutUnit position="west" styleClass="panel-menu">
                    <h:panelGrid columns="1">
                        <p:commandLink value="Planificador de Rutas" ></p:commandLink>
                    </h:panelGrid>
                </p:layoutUnit>
                <p:layoutUnit position="center"  styleClass="panel-dato">
                    <p:layout>
                    <p:layoutUnit position="center" styleClass="mapa" id="idMapa">
                        <div class="mapa-canvas" id="map_canvas"  ></div>
                        <!--
                        <h:panelGroup>
                            <h:graphicImage url="pics/google.jpg" styleClass="mapa" >
                            </h:graphicImage>
                        </h:panelGroup>
                        -->
                    </p:layoutUnit>
                    <p:layoutUnit position="south" styleClass="sur" >
                        <p:commandButton value="Cerrar"
                                         id="btnCerrar"
                                         styleClass="boton"
                                         action="mostrar-principal"
                                         />
                    </p:layoutUnit>
                    </p:layout>
                </p:layoutUnit>
             </p:layout>
        </h:form>
        <script type="text/javascript" >
            initialize();
        </script>
    </h:body>
</h:html>
</f:view>